<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-i18n/1.6.0-rc.1/angular-locale_zh-cn.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" />
    
    <script>
        var app = angular.module('bootApp',['ui.bootstrap']);
        app.controller('msgController',function ($scope,$http,$timeout,$q){
            $scope.msg = '哈哈哈哈 ';//父Scope定义msg
            // $scope.$watch('msg',function(newVal,oldVal){//监视msg的变化
            //                 if(newVal==oldVal){
            //                     console.log('两个值相等');
            //                     return;
            //                 }
            //                 $scope.msg = newVal;
            //                 console.log(newVal+'----'+oldVal);
            // })
            
            // $http({
            //     method:'get',
            //     url:''
            // }).success(data,function(){
            //     $scope.result = data;
            // }).error(err,function(){

            // })
            //'http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_key=周杰伦&bk_length=600'
            // $http.get('http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_key=周杰伦&bk_length=600&languageColumn=name_eu').success(function (data){

            // }).error(function (err){
            //     $scope.result = err;
            // })
            //时间日历空间
            var popup1 = false;
            $scope.dt = new Date();
            $scope.open1 = function (ev){
                    $scope.popup1 = true;
            }
            //小时空控件
            $scope.mytime = new Date();
            $scope.hstep = 1;
            $scope.mstep = 1;
            $scope.ismeridian = true;


            
            //select 下拉框组件  2017-2-21 14:20:32
            $scope.names = [
                { 'name': '张三', 'ename': 'zhangsan' },
                { 'name': '张三2', 'ename': 'zhangsan2' },
                { 'name': '张三3', 'ename': 'zhangsan3' },
                { 'name': '李四', 'ename': 'lisi' },
                { 'name': '王五', 'ename': 'wangwu' }
            ];

           //angular同步编程2016-12-4 20:36:32 钟小懒Demo
           //模仿实际场景比如现在a() b() 为ajax方法需要到后台拿数据,如果不加同步的话代码会跳过ab 先执行c  
           //但是实际上我们需要先拿到a和c的值才能继续下面的操作这里我们就需要用到方法同步了，
           //如果不用同步解决方法可以在http的回调方法success里面写多层代码嵌套，
             
              var a = function(){
			  var one = $q.defer(); // 声明2秒延后执行，表示要去监控后面的执行,其实这里的$scope.$apply()没必要写 这里写的目的是为了练习下angular的数据模型监控功能
                  $timeout(function(){//延时2秒显示a
                  $scope.$apply(function(){
                    $scope.name = 'a';
                    one.resolve('result-'+$scope.name);  // 声明执行成功，模仿http请求数据成功，可以返回数据了   
                  });
                  //one.reject('error!');  //失败消息这里应该写http 请求失败消息 此处没有写catch
                },3000);
                console.log('a方法执行');
                return one.promise;//返回数据
              };

             
              var b = function(){
			   var one = $q.defer(); // 声明3延后执行，表示要去监控后面的执行,其实这里的$scope.$apply()没必要写 这里写的目的是为了练习下angular的数据模型监控功能
                  $timeout(function(){//延时2秒显示a
                  $scope.$apply(function(){
                    $scope.name = 'b';
                    one.resolve('result-'+$scope.name);  // 声明执行成功，模仿http请求数据成功，可以返回数据了   
                  });
                  //one.reject('error!');  //失败消息
                },3000);
                console.log('b方法执行');
                return one.promise;//返回数据
              };

            
            var c = function(){//打印消息
			 var one = $q.defer();
                $scope.name = 'c';
                one.resolve('result-'+$scope.name);
                console.log('c方法执行');
                return one.promise;
            };
            //同步开始 按照限定的顺序执行方法
            $q.all([b(),c(),a()]).then(function(res){//同步执行三个方法 默认C 应该会第一个执行 现在加了同步后  按照自定义的顺序执行   b c a
                $scope.results = '方法返回结果分别是'+res;
            },function(e){
                
            },function(o){
                
            })
            //或者像下面的链式调用也可以
            // b()
            // .then(function(d){
            //     c();
            // },function(e){})
            // .then(function(f){
            //     a();
            // },function(e){});

            $scope.$watch('name',function(n,o){//监视name的变化如果变化了及时更新这里写了也是多次一举  据我观察不监控数据 也可以刷新name值得变化
                if(n==0){
                    return;
                }
                console.log('监控到Name变化'+n);
                $scope.name = n;
            });
                
            
            
        })
        .directive('showMsg',function(){
            return{
                restrict:'A',
                template:'<h2>{{ickt}}---自定义的指令---{{msgs}}</h2>',
                scope:{
                    msgs:'@msgDate'//自定义属性msg-date
                },
                controller:function($scope,$element,$attrs){
                    $scope.ickt = 'ickt';
                   // $scope.$apply();
                },
                link: function(s, e, a) {
                  e.bind('click', function() {
                        alert(s.msgs);
                    }); 
                }
            }
        })
    
    </script>

</head>

<body ng-app="bootApp">

    <div ng-controller="msgController">
        <!--<input type="text" ng-model="msg" />{{msg}}
        <p msg-date='{{msg}}' show-msg='123'></p>


        <input type="text" ng-model="baikeName" />
        <textarea>{{result}}</textarea>-->
    
 

  <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" 
          class="form-control" 
          uib-datepicker-popup="{{format}}" 
          ng-model="dt" is-open="popup1" 
          datepicker-options="dateOptions" 
          ng-required="true" 
          close-text="Close" 
          alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>
    </div>
<hr>

<div uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
{{mytime | date:'HH:mm'}}
 <hr>
{{results}}


        <input type="text" ng-model="selected" uib-typeahead="n.name as n.name+'('+n.ename+')' for n in names | filter:$viewValue | limitTo:8" class="form-control" style="width:161px;">



</div>
</body>

</html>
